<html>
  <head>
    <title>Mixer Sidebar</title>
    <link href="chrome://mixer/content/lib/jquery-ui.min.css" rel="stylesheet"></link>
    <link href="chrome://mixer/skin/mixer.css" rel="stylesheet"></link>
  </head>
  <body id="mixer-sidebar">
    <div id="mixer-instruction-container">
      <h3>Instructions</h3>
      <div id="mixer-instructions">      
        <ol>
          <li>Right-click on marked items in the browser and "Copy to Mixer" to complete the first row of the workspace</li>
          <li>Copy-and-paste from the workspace to search on previous entries</li>
          <li>Use the "Fill Table" button to instruct MIXER to fill the "+++" cells with data</li>
        </ol>
      </div>
    </div>
    <div id="mixer-wait">
      <div id="mixer-fill-progress-bar"></div>
      <span>Fill in Progress</span><span id="mixer-fill-progress-num">N/A</span>
    </div>
    <div id="mixer-interface">
      <div id="mixer-workspace-container">
        <table id="mixer-table">
          <tr class="header-row">
            <th id="head0">&nbsp;</th>
          </tr>
          <tr class="mixer-row">
            <td id="cell0" class="mixer-cell" rowspan="1">&nbsp;</td>
          </tr>
        </table>
      </div>
      <div id="mixer-buttons">
        <div id="mixer-start-fill-button" class="mixer-button mixer-disabled">fill table</div>
        <div id="mixer-cancel-fill-button" class="mixer-button">cancel</div>
        <div id="mixer-export-button" class="mixer-button"><span>export sheet</span></div>
      </div>
    </div>
    <div id="foobar">
      <h1 id="foo"><b>FOO</b></h1>
      <i id="bar">bar</i>
    </div>

  </body>
  <script src="chrome://mixer/content/lib/jquery-2.1.1.min.js"></script>
  <script src="chrome://mixer/content/lib/jquery-ui.min.js"></script>
  <script src="chrome://mixer/content/js/mixer-workspace.js"></script>
  <script>
    var mixer = mixer || {};

    var workspace = function() {
      try {
        return new mixer.workspace();
      } catch (ee) {
        console.log("EEW: %j", ee);
      }
      return null;
    }();
    workspace.view.setContainer(jQuery('#mixer-workspace-container'));

    jQuery(document).on('ready', function() {
      //setTimeout(function() { alert('hi'); }, 800);

      mixer.emit = function(eventType,detail,target) {
        target = target || document;
        detail = detail || {};

        var evt = document.createEvent("CustomEvent");
        evt.initCustomEvent(eventType, true, false, detail);
        target.dispatchEvent(evt);        
      };

      setTimeout(function() {
        mixer.emit('mixer-showing',{showing:true});
      }, 0);  
    
      jQuery("#mixer-instruction-container").accordion({
        collapsible: true,
        heightStyle: "content",
      });

      jQuery("#mixer-fill-progress-bar").progressbar({
        value: false,
      });

      jQuery(".mixer-button").on('click', function() {
        jQuery(this).toggleClass('mixer-disabled');
      });

      jQuery(document).on('foobaz', function(event) {
        var detail = event.originalEvent && event.originalEvent.detail;
        jQuery("#bar").text(detail.foo || 'baz');
      });

      jQuery(document).on('mixerConfig', function(event) {
        var detail = event.originalEvent && event.originalEvent.detail;
        var debug = !! detail.settings.debug;
        jQuery("html").toggleClass("mixer-debug", debug);
      });

      jQuery(document).on('mixerAdd', function(event) {
          console.log("ADD!");
        var detail = event.originalEvent && event.originalEvent.detail;
        var propname = jQuery(detail.attribute).attr('itemprop');        
        console.log('SELECTOR: ' + selector);
        var selector = ["*[itemprop",
                        "=",propname,
                        "]"].join("");
        console.log('SELECTOR: ' + selector);
        var column = jQuery(detail.attribute).parents("html").first().find(selector);
        //column.css({opacity:0.7});
        jQuery(detail.attribute).css({opacity: 0.2});
        setTimeout(function() { column.css({opacity:1.0}); }, 3000);

        column.toggleClass("mixer-data", true);

        workspace.model.addColumn({column: column, primary: detail.attribute, propname: propname});
          console.log("ADDO!");
      });

      jQuery('#foo').on('click', function(event) {
        var evt = document.createEvent("CustomEvent");
        evt.initCustomEvent("numnum", true, false, {foo:'bar'});
        //this.dispatchEvent(evt);

        mixer.emit('numnum', {foo:'hohum'}, this);

        var evt = document.createEvent("CustomEvent");
        evt.initCustomEvent("foobaz", true, false, {foo:'batz'});
        this.dispatchEvent(evt);

        

        console.log(JSON.stringify(mixer.ws));
      });

      jQuery('#foobar').on('numnum', function(event) {
        this.style = "color: blue; ";

        console.log('numnum');

        jQuery('body').toggleClass('mixer-filling');
      });
    });
  </script>
</html>
